let layerIndex;


/**
 * 初始加载
 */
$(function () {
    loadStudentList();
});


/**
 * 根据姓名模糊查询
 */
function findStudentByName() {
    var name = $('#nameInput').val();
    console.log(name);
    $.ajax({
        url: "/api/student/searchPro?name=" + name,
        method: "GET"
    }).done(function (data) {
        // console.log(data);
        var s = "";
        data.forEach((element, index) => {
            let sex = element.sex == 1 ? "男" : "女";
            s += `<tr>
                <td>${element.studentId}</td>
                <td>${element.name}</td>
                <td>${sex}</td>
                <td>${element.department}</td>
                <td> <a href='#' onclick='showStudentDlg(${element.studentId})'>编辑</a> &nbsp;&nbsp;
                <a href='#' onclick='deleteById(${element.studentId})'>删除</a></td>
            </tr>`;
        })
        $("#studentTb").html(s);
    });
}


/**
 * 加载学生列表
 */
function loadStudentList() {
    $.ajax({
        url: "/api/student/listPro"
    }).done(function (data) {
        // console.log(data);
        var s = "";
        data.forEach((element, index) => {
            let sex = element.sex == 1 ? "男" : "女";
            s += `<tr>
                <td>${element.studentId}</td>
                <td>${element.name}</td>
                <td>${sex}</td>
                <td>${element.age}</td>
                <td> <a href='#' onclick='showStudentDlg(${element.studentId})'>编辑</a> &nbsp;&nbsp;
                <a href='#' onclick='deleteById(${element.studentId})'>删除</a></td>
            </tr>`;
        })
        $("#studentTb").html(s);
    });
}


/**
 * 添加/更新学生对话框
 */
function showStudentDlg(id) {
    let title = "新增学生"
    if (id) {
        //编辑
        title = "编辑学生"
        $("#formId").css("display", "block");
        //读取学生信息，并进行数据回显
        $.ajax({
            url: "/api/student/Pro" + id,
            method: "GET"
        }).done(result => {
            console.log(result)
            // 遍历 result 对象并将值填充到 #studForm 表单中
            $.each(result, function (key, value) {
                // 修改选择器，确保选择的是 #studForm 内的字段
                var field = $('#studForm input[name="' + key + '"]');
                if (field.is(':radio')) {
                    field.filter('[value="' + value + '"]').prop('checked', true); // 选中对应的单选按钮
                } else if (field.is(':checkbox')) {
                    field.prop('checked', value === "yes"); // 选中复选框
                } else {
                    field.val(value); // 填充文本框或其他字段
                }
            });
        })
    } else {
        //新增
        $("#studForm")[0].reset();
        $("#formId").css("display", "none");
    }
    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ['520px', 'auto'],
        content: $('#studForm') // 捕获层
    });
}


/**
 * 验证表单是否合法并阻止表单默认提交
 */
layui.use(function () {
    layui.form.on('submit(stud-dlg)', function (data) {
        event.preventDefault();
        commitStuDlg();
    })
});


/**
 * 提交
 */
function commitStuDlg() {
    let studentId = $("#studentId").val()
    let formData = $("#studForm").serialize();
    if (studentId != null && studentId != "") {
        //更新学生
        $.ajax({
            url: "/api/student/updatePro",
            method: "PUT",
            data: formData
        }).done(result => {
            console.log(result);
            if (result.studentId) {
                //读取并刷新原来的读学生列表
                loadStudentList();
                //关闭弹出层
                console.log("add success!")
                if (layerIndex)
                    layer.close(layerIndex)
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            alert("出错了，请重试。");
        });
    } else {
        //新增学生
        //将表单数据发送到服务器的insert中，把提交按钮变灰
        $.ajax({
            url: "/api/student/addPro",
            method: "POST",
            data: formData
        }).done(result => {
            console.log(result);
            if (result.studentId) {
                //读取并刷新原来的读学生列表
                loadStudentList();
                //关闭弹出层
                console.log("add success!")
                if (layerIndex)
                    layer.close(layerIndex)
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            alert("出错了，请重试。");
        });
    }
    //$("#btnOK").prop("disabled", true).addClass("layui-btn-disabled"); // 禁用按钮
}

/**
 * 删除学生
 */
function deleteById(id) {
    //删除
    layer.confirm('确定要删除该学生吗？', {icon: 3}, function () {
        $.ajax({
            url: "/api/student/deletePro/" + id,
            method: "DELETE"
        }).done(result => {
            loadStudentList();
        })
        layer.closeAll();  // 关闭所有层（包括确认框）
    }, function () {
    });
}


/**
 * 添加按钮动画
 */
layui.use(function () {
    var $ = layui.$;
    var elem = $('#addStudentBtn');
    var animName = 'layui-anim-scalesmall'; // 动画类名

    // 通过事件简单演示动画过程
    $('#addStudentBtn').on('click', function () {
        elem.removeClass(animName);
        setTimeout(function () {
            elem.addClass(animName); // 给目标元素追加「平滑放小」的动画
        });
    });
});